<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" />
    <link rel="stylesheet" href="css/jquery.mobile.icons-1.4.5.min.css" />
    <link rel="stylesheet" href="css/jquery.mobile.theme-1.4.5.min.css" />
    <link rel="stylesheet" href="css/index.css" />
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
</head>

<body>
    <div data-role="page" class="message" id="pageone" data-transition="slide" data-direction="reverse">

        <div data-role="panel" class="message" id="revealPanel" style="background:#020202;color: blanchedalmond"
            data-display="reveal">
            <p>已打卡127天</p>
            <a href="mine.html" target="_top"><img src="images/zzu.png"><span style="padding:10px;color: orange">Frank</span></a><br>
            <hr />
            <span>☆☆☆☆☆</span><br>
            <span>zookeeper...</span>
            <div>
                <hr />
                <ul data-role="listview" style="background:#666666;">
                    <li><a href="mine.html" class="ui-btn ui-icon-carat-r ui-btn-icon-right ui-shadow-icon ui-btn-b"
                            target="_top">我的信息</a></li>
                    <li><a href="theme.html" class="ui-btn ui-icon-carat-r ui-btn-icon-right ui-shadow-icon ui-btn-b"
                            target="_top">我的专题</a></li>
                    <li><a href="fav.html" class="ui-btn ui-icon-carat-r ui-btn-icon-right ui-shadow-icon ui-btn-b"
                            target="_top">我的收藏</a></li>
                    <li><a href="album.html" class="ui-btn ui-icon-carat-r ui-btn-icon-right ui-shadow-icon ui-btn-b"
                            target="_top">我的相册</a></li>
                    <li><a href="edit.html" class="ui-btn ui-icon-carat-r ui-btn-icon-right ui-shadow-icon ui-btn-b"
                            target="_top">修改信息</a></li>
                    <hr />
                    <li><a href="location.html" class="ui-btn ui-icon-carat-r ui-btn-icon-right ui-shadow-icon ui-btn-b"
                            target="_top">我的地址</a></li>
                    <li><a href="shop.html" class="ui-btn ui-icon-carat-r ui-btn-icon-right ui-shadow-icon ui-btn-b"
                            target="_top">商城</a></li>

                </ul>
                <button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-power" style="position: absolute;background: #ccc; bottom: 0%;width: 80%">注销</button>
            </div>
        </div>

        <div data-role="panel" id="overlayPanel" data-display="overlay" data-position="right" style="background:#020202;color: blanchedalmond">
            <h2>超级爬虫，搜你想要</h2>
            <form class="ui-filterable">
                <input id="myFilter" data-type="search" placeholder="根据名称搜索..">
            </form>
            <ul data-role="listview" data-filter="true" data-input="#myFilter" data-autodividers="true" data-inset="true">

                <li>
                    <a href="others.html" target="_top">zookeeper8464</a>
                </li>
                <li>
                    <a href="mine.html" target="_top">未闻花名</a>
                </li>
            </ul>
        </div>

        <div data-role="header" class="ui-btn ui-btn-b">
            <a href="#revealPanel" data-swipe-close="true" class="ui-btn ui-corner-all ui-icon-bars ui-btn-icon-notext"></a>
            <a href="#" class="ui-btn ui-btn-right ui-shadow ui-corner-all ui-icon-plus ui-btn-icon-notext"></a>
            <p align="center"> 小黑书</p>
        </div>
        <div data-role="main" class="ui-content">
            <div class="my_info">
                <a href="#">
                    <img style="margin-top:55px" src="images/zzu.png"><br>
                    <span style="padding:10px;color: orange">Frank</span>
                    <p>
                        <span style="padding-top:10px;font-size: 12px;color: white">这家伙很懒什么也没写...</span>
                    </p>
                    <hr style="margin-top:50px">
                    <div class="ui-grid-b">
                        <div class="ui-block-a"><a href="#" class="ui-btn ui-shadow ui-corner-all">粉丝:11432</a></div>
                        <div class="ui-block-b"><a href="#" class="ui-btn ui-shadow ui-corner-all">关注:23</a></div>
                        <div class="ui-block-b"><a href="#" class="ui-btn ui-shadow ui-corner-all">收藏:22</a></div>
                    </div>
                </a>
            </div>
            <hr />
            <p>
                <p class="_p">
                    手机号：<span>18638729321</span> <br>
                    邮箱：<span>572220216@qq.com </span> <br>
                    收货地址：<span>郑州市金水区文化路97号郑州大学北校区</span>
                </p>

                <div id="my" data-role="collapsible">
                    <h4>我的小黑书</h4>
                    <div class="ui-bar ui-bar-a" style="height:380px;margin: 20px">
                        <div style="float:left;width: 100%">
                            <div style="width:100%;float: left;">
                                <img src="images/jc.jpg" style="max-width:100%;height:200px;display: block" alt="可樂鷄翅">
                            </div>
                            <div style="width:100%;float: left;height: 400px; overflow: hidden">
                                <a href="content.html" target="_top">
                                    <p><span>酸甜可口的可樂鷄翅，趁熱咬一口完全停不下來...</span></p>
                                </a>
                                <p style="font-size: 12px;color: #666666">
                                    慕名而来，味道好吃极了，先说椒...
                                </p>
                                <hr />
                                <p style="width:100%;height: 100px;float:left">
                                    <span style="width:50px;height:120px;float:left">
                                        <img src="images/zzu.png" alt="" />
                                    </span>
                                    <span style="float:left;text-align: center;padding: 20px;color: orangered">孫大爺的小吃货</span>
                                </p>
                            </div>
                        </div>

                    </div>
                </div>
                <div data-role="collapsible">
                    <h4>我的文章</h4>
                    <ul data-role="listview" data-split-icon="gear" data-inset="true" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">

                        <li class="ui-li-has-alt ui-li-has-thumb ui-first-child"><a href="#" class="ui-btn">
                                <img src="images/book.jpg">
                                <h2>你是婚姻中的超级照顾者吗？</h2>
                                <p>关系，就像是一面镜子，而这面镜子的意义，就是让你重新认识自己的内心。</p>
                            </a>
                            <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop"
                                aria-haspopup="true" aria-owns="purchase" aria-expanded="false" class="ui-btn ui-btn-icon-notext ui-icon-eye"
                                title="Purchase album" onclick="goTo('article.html')"></a>
                        </li>
                    </ul>
                </div>
                <div data-role="collapsible">
                    <h4>我的圈子</h4>
                    <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
                </div>


            </p>


        </div>

        <div data-role="page" id="pagetwo" data-theme="b">
            <div data-role="header" data-position="fixed" data-fullscreen="true">
                <h1>欢迎来到我的主页</h1>
            </div>
            <div data-role="main" class="ui-content">
                <a href="#pageone" data-transition="slide" data-direction="reverse">点击跳转页面(淡入第一个页面)</a>
            </div>

            <div data-role="footer" data-position="fixed" data-fullscreen="true">
                <h1>底部文本</h1>
            </div>
        </div>


        <div data-role="page" id="class-page">

            <div data-role="content">
                <ul data-role="listview" id="listview2">
                    <li>向右滑动切换页面</li>
                    <li>向右滑动切换页面</li>
                    <li>向右滑动切换页面</li>
                </ul>
            </div>

        </div>
        <div id="footer" data-role="footer" data-position="fixed">
            <div data-role="navbar">
                <ul>
                    <li>
                        <a href="#" data-icon="comment" class="ui-btn ui-shadow-icon ui-btn-b" onclick="goTo('easy.html')">
                            小黑书</a>
                    </li>
                    <li>
                        <a href="user.html" data-icon="user" class="ui-btn ui-shadow-icon ui-btn-b" onclick="goTo('friends.html')">
                            好友</a>
                    </li>
                    <li>
                        <a href="#" data-icon="star" class="ui-btn ui-shadow-icon ui-btn-b" onclick="goTo('active.html')">动态</a>
                    </li>
                </ul>
            </div>
        </div>
</body>

</html>